<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .display {
            overflow-y: auto;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="display">
        <div class="content">
            <div class="placeholder"></div>
            <div class="listView"></div>
        </div>
    </div>
    <script>
        const display = document.querySelector('.display')
        const content = document.querySelector('.content')
        const placeholder = document.querySelector('.placeholder')
        const listView = document.querySelector('.listView')
        // 准备一个待渲染的数组，数组从 1 - 1000
        const arr = Array.from({
            length: 1000
        }, (_, i) => i + 1);
        // 假设每一项 30px，设置 listView 的高度，能够装下所有数组的渲染结果
        content.style.height = arr.length * 30 + "px";
        // q:监听display的滚动事件
        display.addEventListener('scroll', (e) => {
            const scrollTop = e.target.scrollTop
            const currentIndex = Math.floor(scrollTop / 30)
            const currentArr = arr.slice(currentIndex, currentIndex + 10)
            placeholder.style.height = currentIndex * 30 + "px"
            listView.innerHTML = currentArr.map(item =>
                `<div style="height: 30px;background-color: black;color:white;margin: 2px 0;">${item}</div>`
                ).join("")

        })
        // listView默认渲染前十个
        listView.innerHTML = arr.slice(0, 10).map(item =>
            `<div style="height: 30px;background-color: black;color:white;margin: 2px 0;">${item}</div>`
            ).join("")
    </script>
</body>

</html>